<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Svg练习</title>
    <style>
        body {
            width: 100vw;
            padding: 0;
            margin: 0;
        }

        #process {
            width: 100%;
            height: 99vh;
            background: #607d8b;
        }

        .start-dot {
            marker-start: url(#dot)
        }

        .end-arrow {
            marker-end: url(#arrow);
        }

        .fail-fill {
            fill: #ff0000;
        }
    </style>
</head>
<body>
<svg id="process">
    <!--可复用标记-->
    <defs>
        <!--定义可复用标记，结合css选择器使用-->
        <marker id="arrow" viewBox="0 0 10 10" markerWidth="5" markerHeight="5" refX="5" refY="5" orient="auto"
                markerUnits="strokeWidth">
            <path class="fail-fill" d="M0,0 L10,5 L0,10 z"/>
        </marker>
        <marker id="dot" viewBox="0 0 10 10" markerWidth="5" markerHeight="5" refX="1" refY="5" orient="auto"
                markerUnits="strokeWidth">
            <circle class="fail-fill" r="5" cx="5" cy="5"/>
        </marker>
    </defs>
    <g>
        <g stroke-width="2" stroke="white">
            <path class="end-arrow start-dot"
                  d="M10,10 L100,100 L500,100 L600,50 L600,200 L500,300 L600,400 L800,500 L700,400"
                  fill="none"/>
            <line class="end-arrow" x1="200" y1="100" x2="200" y2="150"/>
            <line class="end-arrow" x1="300" y1="100" x2="300" y2="50"/>
            <line class="end-arrow" x1="500" y1="100" x2="500" y2="50"/>
            <line class="end-arrow" x1="600" y1="50" x2="900" y2="60"/>
        </g>
        <text x="150" y="90" font-size="12" fill="white" text-anchor="middle">判断</text>
    </g>
</svg>
</body>
</html>